<template>
  <div class="parameter-product" v-for="(item,index) in printData" :key="index">
    <div class="print-content" id="printArea">
    <div class="flex justify-center mb-6">
      <span class="text-xl font-bold text-gray-800">采购入库单({{item.taskCode}})</span>
    </div>
    <hr/>
  <div class="rute-info">
    <span>采购订单号:{{item.purchaseCode}}</span>
    <span>供应商:{{item.supplier}}</span><br/>
    <span>卸货库区:A区<!--模拟数据--></span>
    <span>采购日期:{{item.purchaseDate}}</span>
  </div>
    <el-table :data="tableDataList[index] || []" stripe style="width: 100%">
  <!-- 序号列 - 要么使用type="index"自动生成，要么使用prop绑定数据 -->
  <el-table-column type="index" label="序号" width="60"/>
  <!-- 如果需要使用数据中的serial作为序号，可改为：
  <el-table-column prop="serial" label="序号" width="60"/>
  -->
  
  <el-table-column prop="gs1" label="GS1编码" />
  <el-table-column prop="batchNum" label="批次号" />
  <el-table-column prop="category" label="物料类别" />
  <el-table-column prop="productCode" label="物料编码" />
  <el-table-column prop="productName" label="物料名称" />
  <el-table-column prop="spec" label="物料规格" />
  <el-table-column prop="unit" label="计量单位" />
  
  <el-table-column 
    label="到货数/合格数/合格率" 
    :header-cell-style="{ color: 'red'}"
  >
    <template #default="scope">
      <!-- 添加默认值处理，避免undefined导致的错误 -->
      {{ scope.row.arrivalNum || 0 }}/{{ scope.row.qualifiedNum || 0 }}/
      {{ scope.row.yield !== undefined ? (scope.row.yield * 100).toFixed(2) + '%' : '0.00%' }}
    </template>
  </el-table-column>
  
  <el-table-column label="待入库量" :formatter="formatPendingStock"/>
  
  <el-table-column prop="areaId" label="收货库区*" width="100px">
    <template #default="scope">
      <el-select v-model="scope.row.areaId" placeholder="库区" style="width: 75px">
        <el-option label="A区" :value="1" />
        <el-option label="B区" :value="2" />
        <el-option label="C区" :value="3" />
      </el-select>
    </template>
  </el-table-column>
  
  <el-table-column prop="productDate" label="生产日期" />
</el-table>

<!-- 将制单人和审核人信息移到表格外部，作为表格的补充信息 -->
<el-row style="margin-top: 10px;">
  <el-col :span="8" style="text-align: left;">
    <span>采购员:{{ item.purchaseUser || '未填写' }}</span>
  </el-col>
  <el-col :span="8" style="text-align: left;">
    <span>库管员:_____________</span>
  </el-col>
  <el-col :span="8" style="text-align: left;">
    <span>仓库负责人:_____________</span>
  </el-col>
  </el-row>
  </div>
  <div style="margin-top: 20px; text-align: center;">
      <el-button type="primary" v-print="handlePrint">打印</el-button>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryDetail } from '@/api/stockIn/purchaseStockIn.js'
import { useRoute } from 'vue-router'

const tableDataList = ref([]); // 替代原 tableData
const rute = useRoute()
const printData = ref([])
const printType=ref('')

const loadPrintData = ()=>{
  const { printData: dataStr, printType: type } = rute.query

  const parseData = JSON.parse(dataStr)

  printType.value = type
  printData.value = parseData
  console.log('打印数据:', printData.value)
 }

async function init() {
  for (const task of printData.value)
    try { 
    // 使用对象扩展运算符简化参数构建
    const params = {
      a_type: 'purchase',
      page: 1,
      pageSize: 10,
      pd: {
        gs1: '',
        batchNum: '',
        category: '', 
        productCode: '',
        productName: '',
        spec: '',
        unit: '',
        inNum: '',
        productDate: '',
        taskId:task.taskId
       }
      
    }
    const res = await queryDetail(params)
    console.log(params)
    if (res.code === 200) {
      tableDataList.value.push(res.data.list)
      console.log(res.data.list)
    } else {
      console.error('获取数据失败:', res)
      // 可以在这里添加错误提示
      // ElMessage.error(`获取数据失败: ${res.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('接口请求错误:', error)
    // ElMessage.error('网络错误，请稍后重试')
  }
}

onMounted(() => {
  loadPrintData()
  init()
})

 function formatPendingStock(row) {
    // 确保数值存在，避免 NaN
    const inNum = Number(row.inNum) || 0;
    const arrivalNum = Number(row.arrivalNum) || 0;
    return arrivalNum - inNum;
}
const handlePrint = ref({
    id: 'printArea',
    popTitle: '打印标题',
    preview: true,
});
</script>

<style scoped>
.parameter-product {
  padding: 30px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 30px;
}
.clickable {
  cursor: pointer;
  color: #409eff;
}
.demo-pagination-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 20px 0;
}
.search-container {
  margin: 5px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form-actions {
  display: flex;
  align-items: center;
}
.rute-info {
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}
.rute-info span {
  margin-right: 20px;
}
@media print {
.print-area {
page-break-after: always;
}
}
</style>